<style lang="less">
  .card_style {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  .bench_search3 {
    margin-bottom: 10px;
  }
  .page_style {
    margin-top: 10px;
    text-align: right;
  }
  .nopadding .ivu-table-cell {
    padding: 0px 0px;
  }
  .mb20 {
    margin-bottom: 20px;
  }
  .t_center {
    text-align: center
  }
</style>
<template>
  <Card shadow class="card_style">
    <Row class="bench_search3">
      <Col span="9" offset="1">
        <span>产品名称：</span>
        <Input style="width: 80%;" v-model="formData.product_name" />
      </Col>
      <Col span="2" offset="3">
        <Button type="info" @click="searchData"><Icon type="ios-search" /> 搜 索</Button>
      </Col>
      <Col span="2">
        <Button type="success" @click="addProduct">添 加</Button>
      </Col>
    </Row>
    <Table border :columns="columnsInfo" :data="productlist"></Table>
    <Page :total="pageTotalNum" :current="pageNo" :page-size="pageSize" @on-change="changePage" class="page_style"/>
    <Modal v-model="modalInfo.mol" :title="modalInfo.title" @on-ok="save" width="900">
      <Table border v-if="modalInfo.detail" :columns="columnsDetail" :data="modalInfo.detailList"></Table>
      <Form :model="modalInfo" v-if="!modalInfo.detail" label-position="right" :label-width="100">
        <Row class="mb20">
          <Col span="6" class="ivu-form-item-label">产品名称：</Col>
          <Col span="12" class="ivu-form-item-content">
            <Input v-model="modalInfo.product_name"></Input>
          </Col>
        </Row>
        <Row class="mb20">
          <Col span="6" class="ivu-form-item-label">价格：</Col>
          <Col span="8" class="ivu-form-item-content">
            <InputNumber :min="0" v-model="modalInfo.product_price1" style="width: 200px"></InputNumber>
          </Col>
        </Row>
        <Row class="mb20">
          <Col span="6" class="ivu-form-item-label">购买数量限制：</Col>
          <Col span="8" class="ivu-form-item-content">
          <!-- <Input v-model="modalInfo.product_max_num" style="width: 200px"></Input> -->
            <InputNumber :min="0" v-model="modalInfo.product_max_num" style="width: 200px"></InputNumber>
          </Col>
          <Col span="8" class="ivu-form-item-label">
            <i style="color: #9ea7b4">此产品最大的购买数量，默认为0，不限制</i>
          </Col>
        </Row>
        <Row class="mb20">
          <Col span="6" class="ivu-form-item-label">校验产品编号：</Col>
          <Col span="8" class="ivu-form-item-content">
            <Input v-model="modalInfo.check_product_code"></Input>
          </Col>
          <Col span="8" class="ivu-form-item-label">
            <i style="color: #9ea7b4">产品校验编号，多个逗号分隔</i>
          </Col>
        </Row>
        <Row class="mb20">
          <Col span="6" class="ivu-form-item-label">详细说明：</Col>
          <Col span="14" class="ivu-form-item-content">
            <Input type="textarea" :autosize="{minRows: 4,maxRows: 8}" v-model="modalInfo.product_details"/>
            <!-- <editor v-model="modalInfo.product_details"/> -->
          </Col>
        </Row>
        <Row class="mb20">
          <Col span="24" class="ivu-form-item-content t_center">
            <!-- <div class="demo-upload-list">
              <template v-if="modalInfo.img_status === 'finished'">
                <img :src="itemoption.url">
                <div class="demo-upload-list-cover">
                  <Icon type="ios-trash-outline" @click.native="handleRemove(itemoption)"></Icon>
                </div>
              </template>
              <template v-else>
                <Progress v-if="modalInfo.showProgress" :percent="modalInfo.percentage" hide-info></Progress>
              </template>
            </div>
            <Upload ref="upload" :show-upload-list="false" :default-file-list="modalInfo.defaultList"
            :on-success="handleSuccess" :max-size="2048"
            :on-exceeded-size="handleMaxSize"
            type="drag" action="//txy.juyouhx.com/Api/Api/ObjectToOss/" style="display: inline-block;width:58px;">
              <div style="width: 58px;height:58px;line-height: 58px;">
                <Icon type="ios-camera" size="20"></Icon>
              </div>
            </Upload> -->
            <Upload multiple action="//txy.juyouhx.com/Api/Api/ObjectToOss/"
            :on-success="uploadPicSuccess" :default-file-list="[]">
              <Button icon="ios-cloud-upload-outline">{{modalInfo.updateIndex == -1?'添加图片':'更新图片'}}</Button>
            </Upload>
            <img :src="product_image" alt="..." style="height: 500px; width:600px">
          </Col>
        </Row>
      </Form>
    </Modal>
    <Modal v-model="modalInfo.detailInfo.mol" :title="modalInfo.detailInfo.title"
    @on-ok="saveDetail" width="700" @on-cancel="cancelDetail">
      <Form :model="modalInfo.detailInfo" label-position="right" :label-width="100">
        <Row class="mb20">
          <Col span="6" class="ivu-form-item-label">明细名称：</Col>
          <Col span="12" class="ivu-form-item-content">
            <Input v-model="modalInfo.detailInfo.product_detail_name"></Input>
          </Col>
        </Row>
        <Row class="mb20">
          <Col span="6" class="ivu-form-item-label">数量：</Col>
          <Col span="12" class="ivu-form-item-content">
            <Input v-model="modalInfo.detailInfo.product_num"></Input>
          </Col>
        </Row>
        <Row class="mb20">
          <Col span="6" class="ivu-form-item-label">类型：</Col>
          <Col span="12" class="ivu-form-item-content">
            <RadioGroup v-model="modalInfo.detailInfo.product_type">
              <Radio label="ticket">
                <span>票务系统</span>
              </Radio>
              <Radio label="sk">
                <span>商客系统</span>
              </Radio>
              <Radio label="brand">
                <span>品牌优惠</span>
              </Radio>
            </RadioGroup>
          </Col>
        </Row>
        <Row class="mb20">
          <Col span="6" class="ivu-form-item-label">类型编号：</Col>
          <Col span="12" class="ivu-form-item-content">
            <Input v-model="modalInfo.detailInfo.product_type_code"></Input>
          </Col>
        </Row>
      </Form>
    </Modal>
  </Card>
</template>

<script>
import { productlist, productUp, productDown, productUpdate, detailList, detailUp,
  detailDown, detailInsert, detailUpdate, addProduct } from '@/api/ctcard'
// import Editor from '_c/editor'
export default {
  components: {
  },
  data () {
    return {
      formData: { product_name: '' },
      pageNo: 1,
      pageSize: 10,
      pageTotalNum: 0,
      productlist: [],
      product_image: '',
      modalInfo: { mol: false, detail: false, detailInfo: { mol: false } },
      columnsInfo: [
        { title: '产品名称', key: 'product_name' },
        { title: '产品编号', key: 'product_code' },
        { title: '价格（元）', key: 'product_price' },
        {
          title: '状态',
          key: 'product_state',
          render: (h, params) => {
            return h('span', params.row.product_state === '1' ? '已上架' : '未上架')
          }
        },
        {
          title: '限购数量',
          key: 'product_max_num',
          render: (h, params) => {
            return h('span', params.row.product_max_num === 0 ? '不限制' : params.row.product_max_num)
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          className: 'nopadding',
          // minWidth: 210,
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: { type: 'info', size: 'small' },
                style: { marginRight: '5px' },
                on: {
                  click: () => {
                    this.detailInfo(params.row)
                  }
                }
              }, '明细')
            )
            if (params.row.product_state === '1') {
              temp.push(
                h('Button', {
                  props: { type: 'error', size: 'small' },
                  style: { marginRight: '5px' },
                  on: {
                    click: () => {
                      this.downandup(params.row, false)
                    }
                  }
                }, '下架')
              )
            } else {
              temp.push(
                h('Button', {
                  props: { type: 'info', size: 'small' },
                  style: { marginRight: '5px' },
                  on: {
                    click: () => {
                      this.editInfo(params.row, params.index)
                    }
                  }
                }, '编辑')
              )
              temp.push(
                h('Button', {
                  props: { type: 'success', size: 'small' },
                  style: { marginRight: '5px' },
                  on: {
                    click: () => {
                      this.downandup(params.row, true)
                    }
                  }
                }, '上架')
              )
            }
            return h('div', temp)
          }
        }
      ],
      columnsDetail: [
        { title: '名称', key: 'product_detail_name' },
        { title: '编号', key: 'product_detail_code' },
        {
          title: '类型',
          key: 'product_type',
          render: (h, params) => {
            if (params.row.product_type === 'ticket') {
              return h('span', '票务系统')
            } else if (params.row.product_type === 'sk') {
              return h('span', '商客系统')
            } else if (params.row.product_type === 'brand') {
              return h('span', '品牌优惠')
            } else {
              return h('span', '未知')
            }
          }
        },
        { title: '数量', key: 'product_num' },
        {
          title: '状态',
          key: 'product_detail_state',
          render: (h, params) => {
            return h('span', params.row.product_detail_state === '1' ? '生效中' : '未生效')
          }
        },
        {
          // title: '操作',
          key: 'action',
          align: 'center',
          className: 'nopadding',
          render: (h, params) => {
            console.log(this.modalInfo)
            let temp = []
            if (this.modalInfo.product_state === '1') {
              return h('div', temp)
            } else {
              temp.push(
                h('Button', {
                  props: { type: 'info', size: 'small' },
                  style: { marginRight: '5px' },
                  on: {
                    click: () => {
                      this.editDetail(params.row)
                    }
                  }
                }, '编辑')
              )
              if (params.row.product_detail_state === '1') {
                temp.push(
                  h('Button', {
                    props: { type: 'error', size: 'small' },
                    style: { marginRight: '5px' },
                    on: {
                      click: () => {
                        this.setDetailState(params.row, false)
                      }
                    }
                  }, '失效')
                )
              } else {
                temp.push(
                  h('Button', {
                    props: { type: 'success', size: 'small' },
                    style: { marginRight: '5px' },
                    on: {
                      click: () => {
                        this.setDetailState(params.row, true)
                      }
                    }
                  }, '生效')
                )
              }
              // temp.push(
              //   h('Button', {
              //     props: { type: 'error', size: 'small' },
              //     style: { marginRight: '5px' },
              //     on: {
              //       click: () => {
              //         this.detailDel(params.row, params.index)
              //       }
              //     }
              //   }, '删除')
              // )
              return h('div', temp)
            }
          },
          renderHeader: (h) => {
            let temp1 = []
            temp1.push(h('span', '操作 '))
            if (this.modalInfo.product_state !== '1') {
              temp1.push(
                h('Button', {
                  props: { type: 'success', size: 'small', icon: 'md-add', shape: 'circle' },
                  style: { fontSize: '10px', width: '20px', height: '20px' },
                  on: {
                    click: () => {
                      this.modalInfo.detailInfo.title = '新添加产品明细'
                      this.modalInfo.detailInfo.product_num = 1
                      this.modalInfo.detailInfo.product_detail_name = ''
                      this.modalInfo.detailInfo.product_type_code = ''
                      this.modalInfo.detailInfo.product_type = 'ticket'
                      this.modalInfo.detailInfo.product_detail_code = '0'
                      this.modalInfo.detailInfo.mol = true
                      this.modalInfo.mol = false
                    }
                  }
                })
              )
            }
            return h('div', temp1)
          }
        }
      ]
    }
  },
  methods: {
    uploadPicSuccess (res, file) {
      this.product_image = res.url
    },
    handleSuccess (res, file) {
      this.modalInfo.product_image = res.url
      console.log(this.modalInfo)
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: '图片过大',
        desc: '图片：' + file.name + '大小超过2M'
      })
    },
    handleRemove (file) {
      const fileList = this.$refs.upload.fileList
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1)
    },
    getData (param) {
      param.pageNo = this.pageNo
      param.pageSize = this.pageSize
      productlist(param).then(res => {
        if (res.data.data) {
          this.pageTotalNum = res.data.data.totalRecord
          this.pageNo = res.data.data.pageNo
          this.productlist = res.data.data.results
        } else {
          this.$Notice.error({
            title: '获取事项列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    changePage (pageNo) {
      this.pageNo = pageNo
      this.getData({})
    },
    downandup (item, state) {
      if (state) {
        productUp(item.product_code).then(res => {
          if (res.data.data) {
            this.$Notice.success({ title: '产品上架成功' })
            item.product_state = '1'
          } else {
            this.$Notice.error({ title: '产品上架失败' })
          }
        })
      } else {
        productDown(item.product_code).then(res => {
          if (res.data.data) {
            this.$Notice.success({ title: '产品下架成功' })
            item.product_state = '2'
          } else {
            this.$Notice.error({ title: '产品下架失败' })
          }
        })
      }
    },
    editInfo (item, index) {
      this.modalInfo.title = item.product_name + '（编号：' + item.product_code + '）'
      this.modalInfo.product_price1 = item.product_price
      this.modalInfo.product_name = item.product_name
      this.modalInfo.product_code = item.product_code
      this.modalInfo.product_details = item.product_details
      this.modalInfo.product_max_num = item.product_max_num || 0
      this.product_image = item.product_image
      this.modalInfo.check_product_code = item.check_product_code
      this.modalInfo.mol = true
      this.modalInfo.detail = false
      this.modalInfo.updateIndex = index
    },
    detailInfo (item) {
      this.modalInfo.title = item.product_name + '（编号：' + item.product_code + '）'
      this.modalInfo.product_state = item.product_state
      detailList(item).then(res => {
        if (res.data.data) {
          this.modalInfo.detailList = res.data.data
          this.modalInfo.product_name = item.product_name
          this.modalInfo.product_code = item.product_code
          this.modalInfo.mol = true
          this.modalInfo.detail = true
        } else {
          this.$Notice.error({ title: '查询明细失败，请重试' })
        }
      })
    },
    addProduct () {
      this.modalInfo.title = '新增产品'
      this.modalInfo.product_price1 = 0
      this.modalInfo.product_name = ''
      this.modalInfo.product_code = ''
      this.modalInfo.product_details = ''
      this.modalInfo.product_max_num = 0
      this.product_image = ''
      this.modalInfo.check_product_code = ''
      this.modalInfo.mol = true
      this.modalInfo.detail = false
      this.modalInfo.updateIndex = -1
    },
    searchData () {
      this.getData({ product_name: this.formData.product_name })
    },
    save () {
      this.modalInfo.product_price = this.modalInfo.product_price1 * 100
      this.modalInfo.product_image = this.product_image
      if (this.modalInfo.updateIndex === -1) {
        addProduct(this.modalInfo).then(res => {
          if (res.data.data) {
            this.$Notice.success({ title: '保存成功' })
            this.getData({})
          } else {
            this.$Notice.error({ title: '失败，请重试' })
          }
        })
      } else {
        productUpdate(this.modalInfo).then(res => {
          if (res.data.data) {
            this.$Notice.success({ title: '保存成功' })
            let temp = this.productlist[this.modalInfo.updateIndex]
            temp.product_details = this.modalInfo.product_details
            temp.product_price = this.modalInfo.product_price * 0.01
            temp.product_max_num = this.modalInfo.product_max_num
            temp.product_image = this.product_image
            temp.check_product_code = this.modalInfo.check_product_code
          } else {
            this.$Notice.error({ title: '失败，请重试' })
          }
        })
      }
    },
    editDetail (item) {
      this.modalInfo.detailInfo.title = item.product_detail_name
      this.modalInfo.detailInfo.product_num = item.product_num
      this.modalInfo.detailInfo.product_detail_name = item.product_detail_name
      this.modalInfo.detailInfo.product_type_code = item.product_type_code
      this.modalInfo.detailInfo.product_type = item.product_type
      this.modalInfo.detailInfo.product_detail_code = item.product_detail_code
      this.modalInfo.detailInfo.mol = true
      this.modalInfo.mol = false
    },
    setDetailState (item, state) {
      let para = {
        product_detail_code: item.product_detail_code,
        product_code: item.product_code
      }
      if (state) {
        detailUp(para).then(res => {
          if (res.data.data) {
            this.$Notice.success({ title: '设置生效成功' })
            item.product_detail_state = '1'
          } else {
            this.$Notice.error({ title: '设置生效失败' })
          }
        })
      } else {
        detailDown(para).then(res => {
          if (res.data.data) {
            this.$Notice.success({ title: '设置失效成功' })
            item.product_detail_state = '0'
          } else {
            this.$Notice.error({ title: '设置失效失败' })
          }
        })
      }
    },
    cancelDetail () {
      this.modalInfo.detailInfo.mol = false
      this.modalInfo.mol = true
    },
    saveDetail () {
      let param = {
        product_num: this.modalInfo.detailInfo.product_num,
        product_detail_name: this.modalInfo.detailInfo.product_detail_name,
        product_type_code: this.modalInfo.detailInfo.product_type_code,
        product_type: this.modalInfo.detailInfo.product_type,
        product_code: this.modalInfo.product_code
      }
      if (this.modalInfo.detailInfo.product_detail_code === '0') {
        detailInsert(param).then(res => {
          if (res.data.data) {
            this.$Notice.success({ title: '添加成功' })
            this.detailInfo({
              product_name: this.modalInfo.product_name,
              product_code: this.modalInfo.product_code
            })
          } else {
            this.$Notice.error({ title: '失败，请重试' })
          }
        })
      } else {
        param.product_detail_code = this.modalInfo.detailInfo.product_detail_code
        detailUpdate(param).then(res => {
          if (res.data.data) {
            this.$Notice.success({ title: '保存成功' })
            this.detailInfo({
              product_name: this.modalInfo.product_name,
              product_code: this.modalInfo.product_code
            })
          } else {
            this.$Notice.error({ title: '失败，请重试' })
          }
        })
      }
    }
  },
  mounted () {
    this.getData({})
  }
}
</script>
